<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-09 10:32:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-19 11:01:26
 * @Description: 应用配置
 -->
<template>
  <div class="body">
    <div class="top">
      <p class="firstTitle">
        背景:
      </p>
      <p>
        在系统的基础架构中，安全框架、令牌鉴权已经是默认的基础功能。但某些场景下，仅有鉴权是不够的，
        一些比较重要的数据，一旦泄露将会导致很严重的后果。所以在此之外，还需要拥有针对请求报文加密解密的功能，
        下面我们就来看一下这个功能如何使用。
      </p>
      <p class="firstTitle">
        运行逻辑:
      </p>
      <p>1、前后端约定一个共同的加密解密方式及密钥</p>
      <p>2、前端发出请求，将请求参数通过工具加密传递至后端</p>
      <p>
        3、后端对加密请求进行统一处理，使用约定好的解密方式与密钥进行参数解密
      </p>
      <p>4、后端解密后获得对应的参数、对象，然后进行下一步操作</p>
      <p>5、操作完毕返回到前端的时候，再次对返回参数进行数据加密</p>
      <p>6、前端获取到加密数据，使用约定好的解密方式与密钥进行解密</p>
      <p>
        7、前端解密后获得具体的对象再进行下一步操作，这样一来，前后端操作都已经完全加密化，再加上token加持，就可以给一些重要的API提供强有力的安全支撑
      </p>
      <p class="firstTitle">
        支持的算法:
      </p>
      <p>凤翎目前支持5种API报文加密的算法。</p>
      <p>
        通用算法包括：AES、DES、RSA（RSA算法只能加密长度小于117字节长度的报文数据）。
      </p>
      <p>国密算法包括：SM2、SM4算法。</p>
      <p class="firstTitle">
        接口全加密传输:
      </p>
      接口全加密传输是指除文件上传等特殊接口外请求参数全部加密，返回数据全部加密。
      <p>
        1、前端由settings.js文件中的ignoreRequest、ignoreResponse字段控制，都为true时为接口、请求全加密状态，后端在nacos中的common-jasypt.yml文件中控制，需要前后端同时开启才生效。
      </p>
      <p>
        2、
        出于系统性能考虑，可以单独选择接口传参全加密或接口响应全加密，前端由settings.js文件中的ignoreRequest、ignoreResponse字段控制。
      </p>
      <p>
        3、
        对于一些特殊需要放行的接口，前端可以在utils文件下的ignoreApi文件中放行接口，同样也需要在nacos中的common-jasypt.yml文件中放行接口
      </p>
    </div>
  </div>
</template>
<script>
import {
  SM2Decrypt,
  SM4Decrypt,
  SM4Encrypt,
  SM2Encrypt
} from '@/utils/encryption/sm4'
import { AESEncrypt, AESDecrypt } from '@/utils/encryption/aes'
import { RSAEncrypt, RSADecrypt } from '@/utils/encryption/rsa'
import { DESEncrypt, DESDecrypt } from '@/utils/encryption/des'
import {
  decryptSm2,
  decryptSm4,
  decryptAes,
  decryptRsa,
  decryptDesData
} from './api'
export default {
  name: 'Encrypt',
  data() {
    return {
      form: { param: '' },
      decryptSm2Data: '',
      decryptSm4Data: '',
      decryptRsaData: '',
      decryptAesData: '',
      decryptDesData: '',
      smTwoData: '',
      smFourData: '',
      rsaData: '',
      aesData: '',
      decryptData: '',
      desData: '',
      smTwoApiData: '',
      smFourApiData: '',
      aesApiData: '',
      desApiData: '',
      rsaApiData: '',
      sm2Data: []
    }
  },
  methods: {
    //sm2加密
    encryptSm2() {
      if (this.form.param) {
        this.smTwoData = SM2Encrypt(JSON.stringify(this.form))
        this.decryptSm2()
      } else {
        this.$message.error(this.LANG.ENCRYPT_TIP)
      }
    },
    //sm2解密
    decryptSm2() {
      if (this.smTwoData) {
        decryptSm2(this.smTwoData)
          .then((res) => {
            this.smTwoApiData = res
            this.decryptSm2Data = SM2Decrypt(res)
          })
          .catch(() => {})
      }
    },
    //sm4加密
    encryptSm4() {
      if (this.form.param) {
        this.smFourData = SM4Encrypt(JSON.stringify(this.form))
        this.decryptSm4()
      } else {
        this.$message.error(this.LANG.ENCRYPT_TIP)
      }
    },
    //sm4解密
    decryptSm4() {
      if (this.smFourData) {
        decryptSm4(this.smFourData)
          .then((res) => {
            this.smFourApiData = res
            this.decryptSm4Data = JSON.stringify(SM4Decrypt(res))
          })
          .catch(() => {})
      }
    },
    //aes加密
    encryptAes() {
      if (this.form.param) {
        this.aesData = AESEncrypt(JSON.stringify(this.form))
        this.decryptAes()
      } else {
        this.$message.error(this.LANG.ENCRYPT_TIP)
      }
    },
    //aes解密
    decryptAes() {
      if (this.aesData) {
        decryptAes(this.aesData)
          .then((res) => {
            this.aesApiData = res
            this.decryptAesData = JSON.stringify(AESDecrypt(res)).replace(
              /\\"/g,
              '"'
            )
          })
          .catch(() => {})
      }
    },
    //rsa加密
    encryptRsa() {
      if (this.form.param) {
        this.rsaData = RSAEncrypt(JSON.stringify(this.form))
        this.decryptRsa()
      } else {
        this.$message.error(this.LANG.ENCRYPT_TIP)
      }
    },
    //rsa解密
    decryptRsa() {
      if (this.rsaData) {
        this.decryptRsaData = RSADecrypt(this.rsaData)
        decryptRsa(this.rsaData)
          .then((res) => {
            this.rsaApiData = res
            // this.decryptRsaData = JSON.stringify(RSADecrypt(res))
            this.decryptRsaData = JSON.stringify(RSADecrypt(res)).replace(
              /\\"/g,
              '"'
            )
          })
          .catch(() => {})
      }
    },
    //des加密
    DESEncrypt() {
      if (this.form.param) {
        this.desData = DESEncrypt(JSON.stringify(this.form))
        this.DESDecrypt()
      } else {
        this.$message.error(this.LANG.ENCRYPT_TIP)
      }
    },
    //des解密
    DESDecrypt() {
      if (this.desData) {
        decryptDesData(this.desData)
          .then((res) => {
            this.desApiData = res
            this.decryptDesData = JSON.stringify(DESDecrypt(res)).replace(
              /\\"/g,
              '"'
            )
          })
          .catch(() => {})
      }
    }
  }
}
</script>
<style scoped lang="scss">
.body {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: white !important;
}

.top {
  padding: 0 2%;
}

.firstTitle {
  width: 100%;
  font-weight: bold;
  font-size: 16px;
}

.title {
  width: 1152px;
  word-break: break-all;
}
</style>